<template>
	<view class="pb40">
		<view class="bg-img">
			<view class="dflex jcc"><image src="../../static/renzheng-img.png" mode=""></image></view>
		</view>
		<view class="container auto">
			<view class="dflex items alc">
				<view class="fs32 mr18" style="color: #313131;">您的姓名</view>
				<input
					type="text"
					placeholder="请输入您的真实姓名"
					placeholder-style="fontSize:32rpx"
					v-model="name"
				/>
			</view>
			<view class="mt30"><Lines :width="550"></Lines></view>

			<view class="dflex items1 alc">
				<view class="fs32 mr18" style="color: #313131;">证件号码</view>
				<input
					type="text"
					placeholder="请输入证件号码"
					placeholder-style="fontSize:32rpx"
					v-model="userCode"
				/>
			</view>
			<view class="mt30"><Lines :width="550"></Lines></view>

			<view class="dflex items alc">
				<view class="fs32" style="color: #313131;margin-right: 54rpx;">开户行</view>
				<input
					type="text"
					placeholder="请输入开户行"
					placeholder-style="fontSize:32rpx"
					v-model="startName"
				/>
			</view>
			<view class="mt30"><Lines :width="550"></Lines></view>

			<view class="dflex items1 alc">
				<view class="fs32 mr18" style="color: #313131;">银行账号</view>
				<input
					type="text"
					placeholder="请输入银行账号"
					placeholder-style="fontSize:32rpx"
					v-model="moneyCode"
				/>
			</view>
			<view class="mt30"><Lines :width="550"></Lines></view>
		</view>

		<view class="button auto textc white fs32 fw600" @click="handerSubmit">立即认证</view>
	</view>
</template>

<script setup>

import { ref,onMounted } from 'vue';
import { verify } from '@/utils/api.js';
onMounted(()=>{
	let pageHead = document.getElementsByTagName('uni-page-head');
	pageHead[0].style.display = 'none';
})
let name = ref('');
let userCode = ref('');
let startName = ref('');
let moneyCode = ref('');
let handerSubmit = () => {
	//身份证
	let userReg = /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/;
	//银行卡
	let moneyReg = /^[1-9]\d{9,29}$/;
	if (!name.value) {
		return uni.showToast({
			title: '请输入您的姓名',
			icon: 'none'
		});
	}
	if (!userCode.value) {
		return uni.showToast({
			title: '请输入您的身份证号码',
			icon: 'none'
		});
	}
	if (!userReg.test(userCode.value)) {
		return uni.showToast({
			title: '身份证号格式不正确',
			icon: 'none'
		});
	}
	if (!startName.value) {
		return uni.showToast({
			title: '请输入您的开户行名称',
			icon: 'none'
		});
	}
	if (!moneyCode.value) {
		return uni.showToast({
			title: '请输入您的银行卡号',
			icon: 'none'
		});
	}
	if (!moneyReg.test(moneyCode.value)) {
		return uni.showToast({
			title: '请输入正确的银行卡号',
			icon: 'none'
		});
	}
	let data = {
		id_card: userCode.value,
		name: name.value,
		bank_name: startName.value,
		bank_account: moneyCode.value
	};
	verify(data).then(res => {
		if (res.code == 1) {
			uni.showToast({
				title: '您已提交认证',
				icon: 'none'
			});
			setTimeout(() => {
				uni.switchTab({
					url: '/pages/my/my'
				});
			}, 1000);
		}else{
			return uni.showToast({
				title:res.msg,
				icon:'none'
			})
		}
	});
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f6f7fa;
}
.bg-img {
	width: 750rpx;
	height: 737rpx;
	background-image: url('../../static/renzheng-bgimg.png');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	image {
		width: 598rpx;
		height: 151rpx;
		margin-top: 49rpx;
	}
}
.container {
	width: 690rpx;
	background: #fff;
	border-radius: 30rpx;
	margin-top: -280rpx;
	padding-bottom: 56rpx;
	.items {
		padding-left: 70rpx;
		padding-top: 56rpx;
	}
	.items1 {
		padding-top: 65rpx;
		padding-left: 70rpx;
	}
}
.button {
	width: 594rpx;
	height: 90rpx;
	line-height: 90rpx;
	background: linear-gradient(137deg, #f65249 0%, #e1251b 100%);
	border-radius: 15rpx;
	margin-top: 80rpx;
}
</style>
